/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("label") {
    $titon-label-class: generate-class-name($titon-label);
    $titon-label-modifiers: map-get($titon-label, "modifiers");

    #{$titon-label-class} {
        @extend %placeholder-inline-block;
        font-size: .7rem;
        line-height: 1;
        padding: .275rem .425rem;
        text-transform: uppercase;
        border-radius: 2px;
        white-space: nowrap;
        top: -1px;
        letter-spacing: 1px;
        background: #fff;

        &:empty {
            display: none;
        }

        &::after {
            content: "";
            height: 0;
            width: 0;
            position: absolute;
        }
    }

    //-------------------- Modifiers --------------------//

    @if (is-feature-enabled("all-modifiers") or index($titon-label-modifiers, "badge")) {
        #{generate-class-name($titon-label, "", "badge")} {
            border-radius: 50%;
        }
    }

    @if (is-feature-enabled("all-modifiers") or index($titon-label-modifiers, "arrow-left")) {
        #{generate-class-name($titon-label, "", "arrow-left")} {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            padding-left: 2px;
            margin-left: 10px;

            &::after {
                top: 0;
                right: 100%;
                border: .65rem solid transparent;
                border-right-color: #fff;
            }
        }
    }

    @if (is-feature-enabled("all-modifiers") or index($titon-label-modifiers, "arrow-right")) {
        #{generate-class-name($titon-label, "", "arrow-right")} {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            padding-right: 2px;
            margin-right: 10px;

            &::after {
                top: 0;
                left: 100%;
                border: .65rem solid transparent;
                border-left-color: #fff;
            }
        }
    }

    @if (is-feature-enabled("all-modifiers") or index($titon-label-modifiers, "ribbon-left")) {
        #{generate-class-name($titon-label, "", "ribbon-left")} {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;

            &::after {
                top: 100%;
                left: 0;
                border: 1em solid transparent;
                border-top-width: 0 !important;
                border-left-width: 0 !important;
                border-right-color: theme-setting("bg-light");
            }
        }
    }

    @if (is-feature-enabled("all-modifiers") or index($titon-label-modifiers, "ribbon-right")) {
        #{generate-class-name($titon-label, "", "ribbon-right")} {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;

            &::after {
                top: 100%;
                right: 0;
                border: 1em solid transparent;
                border-top-width: 0 !important;
                border-right-width: 0 !important;
                border-left-color: theme-setting("bg-light");
            }
        }
    }

    //-------------------- Sizes --------------------//

    @include generate-size-small($titon-label-class) {
        font-size: .6rem;
        padding: .2rem .35rem;

        @if (
            is-feature-enabled("all-modifiers") or
            index($titon-label-modifiers, "arrow-left") or
            index($titon-label-modifiers, "arrow-right")
        ) {
            &#{generate-class-name($titon-label, "", "arrow-left")},
            &#{generate-class-name($titon-label, "", "arrow-right")} {
                &::after {
                    border-width: .5rem;
                }
            }
        }
    }

    @include generate-size-large($titon-label-class) {
        font-size: .8rem;
        padding: .35rem .5rem;

        @if (
            is-feature-enabled("all-modifiers") or
            index($titon-label-modifiers, "arrow-left") or
            index($titon-label-modifiers, "arrow-right")
        ) {
            &#{generate-class-name($titon-label, "", "arrow-left")},
            &#{generate-class-name($titon-label, "", "arrow-right")} {
                &::after {
                    border-width: .75rem;
                }
            }
        }
    }
}
